import Taro, { Component, Config, } from '@tarojs/taro'
import { HTTP, baseurl } from './../../../common/index';
import { API } from './../../../common/API';
import { AtFab, AtCard } from 'taro-ui'
import './index.less'
import { View, MovableArea, MovableView, Text } from '@tarojs/components';
export default class Index extends Component<any, any>{
  constructor() {
    super(...arguments)
    this.state = {
      files: [],
      x: 10000,
      y: 10000,
    }
  }
  onChange(files) {
    console.log(files)
    this.setState({
      files
    })
  }
  private goEditBill() {
    Taro.navigateTo({
      url: "../addbills/index"
    })
  }
  upLoadImages() {
    const uploadTask = Taro.uploadFile({
      url: baseurl + API.UPLOADFILE, //仅为示例，非真实的接口地址
      filePath: this.state.files[0].url,
      name: 'file',
      header: {
        'Authorization': Taro.getStorageSync('userInfo').token,
        'content-type': 'multipart/form-data'
      },
      formData: {
        file: this.state.files[0].url
      },
      success: function (res) {
        console.log(res)
      }
    })
    uploadTask.progress((res) => {
      console.log('上传进度', res.progress)
      console.log('已经上传的数据长度', res.totalBytesSent)
      console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
    })
    // uploadTask.abort() // 取消上传任务
  }
  onFail(mes) {
    console.log(mes)
  }
  onImageClick(index, file) {
    console.log(index, file)
  }
  componentWillMount() {
    console.log('componentWillMount')
  }
  componentDidMount() {
    console.log('componentDidMount')
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
  }

  componentDidShow() {
    console.log('componentDidShow')
  }

  componentDidHide() {
    console.log('componentDidHide')
  }
  onButtonClick() {
    this.setState({
      isOpened: true
    })
  }

  /**
   * 指定config的类型声明为: Taro.Config  wxeb9503bf3c881e0e  gray:8a8a8a  actiev:13227a
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '懂调度'
  }
  render() {
    return (
      <View className='container'>
        <MovableArea className='move-area'>
          <MovableView style='height: 80px; width: 80px;' direction='all'
            x={this.state.x}
            y={this.state.y}
            className='add-btn'
            onClick={this.goEditBill.bind(this)}>
            <AtFab>
              <Text className='at-fab__icon at-icon at-icon-add'></Text>
            </AtFab>
          </MovableView>
          <AtCard
            note='小Tips'
            extra='额外信息'
            title='这是个标题'
          // thumb='http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG'
          >
            这也是内容区 可以随意定义功能
          </AtCard>
        </MovableArea >
      </View>
    )
  }
}
